<script setup>
const version = '1.0.0'
</script>

<template>
  <div class="about-container">
    <h2>关于</h2>
    <div class="about-content">
      <h3>AI Chat Assistant</h3>
      <p class="version">版本 {{ version }}</p>

      <div class="section">
        <h4>功能特点</h4>
        <ul>
          <li>基于 Deepseek AI 的智能对话</li>
          <li>支持代码高亮和格式化</li>
          <li>历史对话记录</li>
          <li>个性化设置</li>
        </ul>
      </div>

      <div class="section">
        <h4>技术栈</h4>
        <ul>
          <li>Electron</li>
          <li>Vue 3</li>
          <li>Node.js</li>
        </ul>
      </div>

      <div class="section">
        <h4>联系我们</h4>
        <p>如有问题或建议，请发送邮件至：</p>
        <a href="mailto:wangbro9520@163.com">wangbro9520@163.com</a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.about-content {
  margin-top: 20px;
}

.version {
  color: var(--color-text);
  margin: 10px 0;
}

.section {
  margin: 30px 0;
}

h4 {
  margin-bottom: 10px;
  color: var(--color-text);
}

ul {
  list-style: disc;
  margin-left: 20px;
  color: var(--color-text);
}

li {
  margin: 5px 0;
}

a {
  color: #6988e6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>
